﻿@model LogManager.ViewModels.Filter.EventDateFilterViewModel
           
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Events per Day";
    ViewBag.Breadcrumb = "Statistic > Events per Day";
}

<h2>Events</h2>

<div id="filter-form" class="group">
    @using (Html.BeginForm())
    {
        <fieldset style="width:210px;">
            <legend><h3>Date</h3></legend>        
            @Html.DisplayForModel()
        </fieldset>
        <br clear="all" />
        <div>
            <input id="showReport" type="submit" value="View Report" />
        </div>            
    }
</div>

<fieldset>
    <legend>Errors Chart</legend>
    <div id="chart" style="min-width: 800px; min-height: 600px;">
    </div>
</fieldset>

@section AsideLeft{
    @Html.Partial("StatisticNavigation")
}

@section Foot{
    <script src="@Url.Content("~/Scripts/highcharts.js")" type="text/javascript" ></script>
    <script type="text/javascript">
    var options, chart;
    $(document).ready(function () {
        var dateFormat = 'dd.mm.yy';        

        $('#Start').datepicker({ dateFormat: dateFormat });
        $('#End').datepicker({ dateFormat: dateFormat });   


        options = {
            chart: {
                renderTo: 'chart',
                type: 'spline'
            },
            title: {
                text: 'Events'
            },
            subtitle: {
                text: 'Render Date: @(DateTime.Now.ToShortDateString())'
            },
            xAxis: {
                type: 'datetime',
            },
            yAxis: {
                title: {
                    text: 'Amount of Events'
                },
                min: 0
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b>' +
               Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' Errors';
                }
            },
            series: []
        };

        function getDateFilter() {
            return {start: $('#Start').val(), end: $('#End').val()};
        }

        $('#showReport').click(function (e) {
                e.preventDefault();
                showReport(getDateFilter());                
         });

         showReport(getDateFilter());

        //Get data with json
        function showReport(dateFilter) {    
            $('#chart').html('');

            //show loader
            $('#chart').css('background',"url('@(Url.Content("~/Content/Images/ajax-loader.gif"))') center center no-repeat");

            //Clear series
            options.series = [];

            $.post('@(Url.Action("EventsPerDayData", "Statistic"))', {start : $('#Start').val(), end : $('#End').val()}, function(data) {
                $.each(data, function (logkey,log) {
                    var serie = {
                        data: []
                    };

                    serie.name = log.name;

                    $.each(log.data, function (datakey,day) {
                        var date = new Date(parseInt(day.date.replace("/Date(", "").replace(")/", ""), 10));
                        serie.data.push([Date.UTC(date.getUTCFullYear(), date.getMonth(), date.getDate()), parseInt(day.count)]);
                    });                    
                    options.series.push(serie);
                });
                chart = new Highcharts.Chart(options);
            });
        }        

    });   
    </script>

}
